<template>
  <div class="category-icons">
    <category-item
    v-for="item of categoryData"
    :key="item.id"
    :bgColor="item.bgColor"
    :icon="item.icon"
    :iconText="item.iconText"
    :field="item.field"
    ></category-item>
  </div>
</template>

<script>
import {mapState} from 'vuex'
import CategoryItem from './Sub.vue'
import fields from '@/assets/data/fields.js'

export default {
  name: 'CategoryIcons',
  data() {
    return {
      categoryData: fields,
    }
  },
  components: {
    CategoryItem
  },
  computed: {
    ...mapState(['field'])
  }
}
</script>

<style lang="scss" scoped>
// 这样写的好处是变量
@import '@/assets/style/mixins.scss';
@import '@/assets/style/variables.scss';
.category-icons {
  @include flex-row;
  @include vh-center;
  width: 100%;
  padding: .18rem 0;
  background-color: #fff;
}
</style>